$(function () {
  // 需求1. 初始化文章列表
  // 封装函数 后续修改 删除 添加 都要使用
  renderCategory()

  //封装函数 渲染文章类别列表
  function renderCategory () {
    //发送ajax请求
    axios({
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      let {
        data: { status, data, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      let arr = []
      data.forEach(ele => {
        if (ele.Id < 0) return
        arr.push(`
                    <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                          <button data_id="${ele.Id}" id="gai" class="layui-btn layui-btn-xs">修改</button>
                          <button data_id="${ele.Id}" id="rovm" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                    </td>
                `)
      })
      $('tbody')
        .empty()
        .html(arr.join(''))
    })
  }

  // 需求2. 点击添加 动态生成弹出层
  // 声明一个变量，让它表示弹层；后面关闭弹层时会用到它。
  let addIndex = 0
  // 一、点击添加分类，实现弹层
  $('#addBtn').click(function () {
    addIndex = layer.open({
      type: 1,
      title: '添加类别',
      content: `
          <form id="add-form" class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">分类别称</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别称" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
      `, // 内容在HTML中
      area: ['500px', '250px']
    })
  })

  // 需求3. 添加提交表单
  $('body').on('submit', '#add-form', function (e) {
    e.preventDefault()
    axios({
      url: '/my/article/addcates',
      method: 'post',
      data: $(this).serialize()
    }).then(res => {
      console.log(res.data)
      //成功回调
      let {
        data: { status, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      layui.layer.msg('恭喜添加成功')
      renderCategory()
      // 关闭弹层
      layui.layer.close(addIndex)
    })
  })

  // 需求4. 点击修改 动态生成弹出层
  // 声明一个变量，让它表示弹层；后面关闭弹层时会用到它。
  let gaiIndex = 0
  // 一、点击添加分类，实现弹层--
  $('tbody').on('click', '#gai', function () {
    gaiIndex = layer.open({
      type: 1,
      title: '修改类别',
      content: `
          <form id="gai-form" lay-filter="formTest" class="layui-form" action="">
              <input type="hidden" name="Id">
              <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">分类别称</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别称" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              </div>
            </div>
          </form>
      `, // 内容在HTML中
      area: ['500px', '250px']
    })
    let id = $(this).attr('data_id')
    axios({
      url: '/my/article/cates/' + id
    }).then(res => {
      //成功回调
      let {
        data: { status, message, data }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      layui.form.val('formTest', data)
    })
  })

  //   // 需求5. 修改提交表单
  $('body').on('submit', '#gai-form', function (e) {
    e.preventDefault()
    axios({
      url: '/my/article/updatecate',
      method: 'post',
      data: $(this).serialize()
    }).then(res => {
      console.log(res.data)
      //成功回调
      let {
        data: { status, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      layui.layer.msg('恭喜修改成功')
      renderCategory()
      // 关闭弹层
      layui.layer.close(gaiIndex)
    })
  })

  // 需求6. 删除
  $('tbody').on('click', '#rovm', function () {
    let id = $(this).attr('data_id')
    layui.layer.confirm('确定删除文章类别?', { icon: 3, title: '提示' }, function (index) {
      axios({
        url: '/my/article/deletecate/' + id
      }).then(res => {
        //成功回调
        renderCategory()
        layui.layer.msg('恭喜删除成功')
      })
      layer.close(index)
    })
  })
})
